<!--
 * @Author: yanjikun
 * @Date: 2022-04-29 14:34:00
 * @LastEditors: yanjikun
 * @LastEditTime: 2022-05-17 17:57:06
 * @Description: file content
-->
<template>
  <div class="flex flex-col">
    <div class="text-right pt-8px pr-16px">
      <Button type="primary" @click="openUserModal()">新增</Button>
    </div>
    <div class="flex-1 mt-8px">
      <DynamicTable
        :columns="columns"
        :data-request="menuTableRequest"
        :pagination="false"
        :show-index="true"
      ></DynamicTable>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { useTable } from '@/components/Table/src/hooks/useTable'
  import { TableColumn } from '@/components/Table/src/types/column'
  import { useFormModal } from '@/hooks/useModal/useFormModal'
  import { tableColumns, dataFormConfig } from './user.data'
  import { Button } from 'ant-design-vue'
  import {
    userCreate,
    userDelete,
    userDisable,
    userEnable,
    userInfo,
    userListByOrg,
    userResetPassword,
    userUpdate,
  } from '@/api/system/user'
  import { useUserStore } from '@/store/modules/user'
  defineOptions({
    name: 'Menu',
  })
  const userStore = useUserStore()
  const [DynamicTable, dynamicTableInstance] = useTable()
  const [showModal] = useFormModal()
  const menuTableRequest = async () => {
    const data = await userListByOrg({ org: userStore.getTenant() })
    return data
  }
  const openUserModal = async (
    record: Partial<API.UserListItem> = { status: 1, msgPush: true },
  ) => {
    await showModal({
      modalProps: {
        title: `${record.id ? '编辑' : '新增'}用户`,
        width: 520,
        onFinish: async (values) => {
          record.id && (values.id = record.id)
          await (record.id ? userUpdate : userCreate)(values)
          dynamicTableInstance.reload()
        },
      },
      formProps: {
        config: dataFormConfig,
        initialValues: record,
      },
    })
  }
  const handleDeleteConfirm = async (record: API.UserListItem) => {
    await userDelete({ id: record.id })
    dynamicTableInstance.reload()
  }

  const handleEnableConfirm = async (record: API.UserListItem) => {
    await userEnable({ id: record.id })
    dynamicTableInstance.reload()
  }

  const handleDisableConfirm = async (record: API.UserListItem) => {
    await userDisable({ id: record.id })
    dynamicTableInstance.reload()
  }

  const handleResetPasswordConfirm = async (record: API.UserListItem) => {
    await userResetPassword({ login: record.login })
    dynamicTableInstance.reload()
  }
  const columns: TableColumn<API.UserListItem>[] = [
    ...tableColumns,
    {
      title: '操作',
      dataIndex: '$action',
      width: 250,
      actions: ({ record }) => {
        return [
          {
            label: '编辑',
            onClick: async () => {
              const detailData = await userInfo({ id: record.id })
              return openUserModal(detailData)
            },
          },
          {
            label: '重置密码',
            modalConfirm: {
              title: '确定重置该账号密码为“123456”',
              onOk: () => handleResetPasswordConfirm(record),
            },
          },
          {
            label: '禁用',
            hidden: record.status !== 1,
            modalConfirm: {
              title: '确定禁用该账号？禁用后该账号不可登录！',
              onOk: () => handleDisableConfirm(record),
            },
          },
          {
            label: '启用',
            hidden: record.status !== 0,
            modalConfirm: {
              title: '确定启用该账号？启用后该账号可正常使用！',
              onOk: () => handleEnableConfirm(record),
            },
          },
          {
            label: '删除',
            modalConfirm: {
              title: '确定删除该用户吗?',
              onOk: () => handleDeleteConfirm(record),
            },
          },
        ]
      },
    },
  ]
</script>

<style lang="less" scoped></style>
